{% extends '_base.html' %}
{% load static %}

{% block maincontent %}
<div class="col-md-5">
  <ol class="breadcrumb">
    <li><a class="text-primary" href="{% url 'hospital' %}">Home</a></li>
    <li class="text-primary">Contact</li>
  </ol>
</div>

<!--contact-->
<section id="contact" class="section-padding">
  <style>
    /* ====== CONTACT SECTION (3D STYLE) ====== */
    #contact {
      background: linear-gradient(145deg, #0d1025, #141a33);
      color: #fff;
      position: relative;
      padding: 100px 0;
      overflow: hidden;
    }

    #contact::before {
      content: "";
      position: absolute;
      top: -100px;
      left: -100px;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(0, 209, 255, 0.2), transparent 70%);
      filter: blur(100px);
      animation: lightFlow 12s infinite alternate ease-in-out;
    }

    @keyframes lightFlow {
      from { transform: translateY(0); }
      to { transform: translateY(50px); }
    }

    .ser-title {
      text-align: center;
      font-size: 2.5rem;
      color: #00e6ff;
      text-shadow: 0 0 15px rgba(0, 209, 255, 0.7);
      font-weight: 700;
      margin-bottom: 10px;
    }

    .botm-line {
      width: 80px;
      height: 4px;
      border: none;
      background: linear-gradient(90deg, #00d1ff, #007bff);
      border-radius: 10px;
      margin: 10px auto 40px;
    }

    /* ====== CONTACT INFO ====== */
    .contact-info {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(12px);
      padding: 40px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }

    .contact-info:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 35px rgba(0, 209, 255, 0.4);
    }

    .cnt-ttl {
      font-size: 1.8rem;
      font-weight: 600;
      color: #00d1ff;
      text-shadow: 0 0 10px rgba(0, 209, 255, 0.5);
    }

    .form-group input,
    .form-group textarea {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      font-size: 1rem;
      border-radius: 12px;
      padding: 12px 15px;
      transition: all 0.3s ease;
      width: 100%;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: #9ba6b1;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #00d1ff;
      box-shadow: 0 0 12px rgba(0, 209, 255, 0.3);
    }

    .btn-form {
      background: linear-gradient(90deg, #00d1ff, #007bff);
      border: none;
      border-radius: 50px;
      padding: 12px 35px;
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: 0.5px;
      box-shadow: 0 8px 20px rgba(0, 209, 255, 0.3);
      transition: all 0.3s ease;
    }

    .btn-form:hover {
      box-shadow: 0 0 20px rgba(0, 209, 255, 0.7);
      transform: translateY(-3px);
    }

    /* ====== LEFT CONTACT INFO ====== */
    .col-md-4 h3 {
      color: #00d1ff;
      text-shadow: 0 0 10px rgba(0, 209, 255, 0.5);
      font-weight: 600;
    }

    .col-md-4 p {
      color: #cfd8dc;
      font-size: 0.95rem;
    }

    .col-md-4 i {
      color: #00e6ff;
      margin-right: 10px;
      text-shadow: 0 0 10px rgba(0, 209, 255, 0.6);
    }

    /* ====== SUCCESS MESSAGE ====== */
    .w-full.text-white.bg-green-500 {
      background: linear-gradient(90deg, #00b09b, #96c93d);
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 255, 100, 0.4);
      animation: fadeIn 0.8s ease;
      margin-bottom: 20px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ====== RESPONSIVE ====== */
    @media (max-width: 768px) {
      .contact-info {
        padding: 25px;
      }
      .ser-title {
        font-size: 2rem;
      }
    }
  </style>

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 class="ser-title">Contact us</h2>
        <hr class="botm-line">
      </div>

      <!-- LEFT: CONTACT INFO -->
      <div class="col-md-4 col-sm-4">
        <h3>Contact Info</h3>
        <div class="space"></div>
        <p><i class="fa fa-map-marker fa-fw fa-2x"></i>321 Awesome Street<br>New York, NY 17022</p>
        <div class="space"></div>
        <p><i class="fa fa-envelope-o fa-fw fa-2x"></i>info@companyname.com</p>
        <div class="space"></div>
        <p><i class="fa fa-phone fa-fw fa-2x"></i>+1 800 123 1234</p>
      </div>

      <!-- RIGHT: CONTACT FORM -->
      <div class="col-md-8 col-sm-8 marb20">
        <div class="contact-info">
          <h3 class="cnt-ttl">Get in Touch</h3>
          <div class="space"></div>

          {% if messages %}
          <div class="w-full text-white bg-green-500">
            <div class="container flex items-center justify-between px-6 py-4 mx-auto">
              <div class="flex">
                <svg viewBox="0 0 40 40" class="w-6 h-6 fill-current">
                  <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"></path>
                </svg>
                {% for message in messages %}
                <p class="mx-3">{{ message }}</p>
                {% endfor %}
              </div>

              <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>
          </div>
          {% else %}
          <form action="{% url 'contact' %}" method="post" role="form" class="contactForm">
            {% csrf_token %}
            <div class="form-group">
              <input type="text" name="name" class="form-control br-radius-zero" id="name" placeholder="Your Name" required>
            </div>
            <div class="form-group">
              <input type="email" name="email" class="form-control br-radius-zero" id="email" placeholder="Your Email" required>
            </div>
            <div class="form-group">
              <input type="text" name="subject" class="form-control br-radius-zero" id="subject" placeholder="Subject" required>
            </div>
            <div class="form-group">
              <textarea name="message" rows="5" class="form-control br-radius-zero" placeholder="Message" required></textarea>
            </div>
            <div class="form-action">
              <button type="submit" class="btn btn-form">Send Message</button>
            </div>
          </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>
<!--/ contact-->

<!--Footer Start-->
{% include '_footer.html' %}
<!--Footer End-->
{% endblock maincontent %}